import React, { Component } from 'react'
import "./index.less"
import {formateDate} from "../../utils/dataUtils"
import memoryUtils from "../../utils/memoryUtils"
import storageUtils from "../../utils/storageUtils";
import menuList from "../../config/menuconfig"
import { reqWeather } from '../../api'
import {withRouter} from "react-router-dom"
import { Modal } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import LinkButton from '../link-button';


const { confirm } = Modal;


class Header extends Component {

    state ={
        currentTime: formateDate(Date.now()), // 当前时间字符串
        currentTemperature:"",
        weather:""
    }

    getTime = () =>{
        this.timer1 = setInterval(() =>{
            const currentTime = formateDate(Date.now());
            this.setState({currentTime});
        },1000)
    }
    getWeatherAndTemperture = () => {
        this.timer2 = setInterval( async() =>{
            const {weather,temperature} = await reqWeather(320113);
            this.setState({weather,currentTemperature:temperature});
        },10000)
    }

    getTitle = () =>{
        const path = this.props.location.pathname;
        let title;
        menuList.forEach(item => {
            if(item.key === path) { // 如果item的key与path一样,item的title就是需要显示的title
                title = item.title
            }
            else if(item.children) { // 在所有的子item中寻找匹配的
                const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                // 如果有值就说明有匹配的
                if(cItem) {
                    // 给title赋值
                    title = cItem.title
                }
            }
        })
        return title;
    }
    

    /*
        退出登录 
     */
    loginOut = () => {
        // 显示确认框
        confirm({
            title: '确认退出吗?',
            icon: <QuestionCircleOutlined />,
            okText: "退出",
            cancelText: "取消",
            onOk: () => {;
                //   清除保存的 user 数据
                storageUtils.removeUser();
                memoryUtils.user = {};
                //   跳转到login界面
                this.props.history.replace("/login")
            }

          });
    }


    /*
        不能这么做,不会更新显示 
     */
    componentDidMount(){
        this.getTime();
        this.getWeatherAndTemperture();
    }

    /* 
        当前组件卸载之前
     */
    componentWillUnmount() {
        clearInterval(this.timer1);
        clearInterval(this.timer2);
    }

    render() {
        const {currentTime, currentTemperature, weather} = this.state;
        
        const username = memoryUtils.user.username;
        
        const title = this.getTitle();
        return (
            <div className="header">
                <div className="header-top">
                    <span>欢迎,{username}</span>
                    <LinkButton onClick={this.loginOut}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <span>{currentTemperature}℃</span>
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        )
    }
}


export default withRouter(Header);